<template>
  <div class="vertical-table">
    <div v-model="mymoney" class="data-block">
      <!-- 图片和数据的容器 -->
      <div class="image-container" style="background-image: url('/my_wallet_background.png');">
        <!-- 数据表格 -->
        <div class="table-content">
          <div class="table-row">
            <div class="table-cell"></div>
            <div class="table-cell data-cell" style="font-size: 60px;">
              <!-- 显示数据，并设置样式使其居中 -->
              {{ mymoney.puresCoin }}
            </div><br>
          </div>
          <span style="font-size: 20px;">H币</span><br>
          <div class="table-row">
            <div class="table-cell"></div>
            <div class="table-cell button-container">
              <el-button type="danger" @click="deleteDoctor(mymoney)">提现</el-button>
              <div style="width: 100px;"></div> <!-- 设置间距，可以根据需要调整宽度 -->
              <el-button type="danger" @click="cz">充值</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="充值页面" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="充值金额" :label-width="formLabelWidth">
          <el-input v-model="form.money" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureMoney(form.money)">确 定</el-button>
      </div>
    </el-dialog>
    <el-table v-loading="" :data="personalList">
      <el-table-column label="" align="center">
        <template slot-scope="scope">
          <div>{{ scope.row.accountTitle }}</div>
          <div>{{ scope.row.accountTime }}</div>
        </template>
      </el-table-column>
      <el-table-column label="" align="center">
        <template slot-scope="scope">
          <div>{{ scope.row.accountDefault }}H币</div>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>


<script>
import {followRemove} from "@/api/patient/patient";
import {addPay, listrecord, moneyList, surePay} from "@/api/patient/money";

export default {
  name: "Notice",
  dicts: ['hospital_department'],
  data() {
    return {
      personalList:[],
      dialogFormVisible: false,
      formLabelWidth: '68px',
      doctorPic:'',
      doctorName:'',
      doctorPositions:'',
      doctorHospital:'',
      doctorDepartments:'',
      // 遮罩层
      loading: true,
      mymoney:[],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        noticeTitle: [
          {required: true, message: "公告标题不能为空", trigger: "blur"}
        ],
        noticeType: [
          {required: true, message: "公告类型不能为空", trigger: "change"}
        ]
      }
    };
  },
  created() {
    this.getList();
    this.getListrecord();
  },
  methods: {
    sureMoney(form){
      console.log(form);
      addPay(form).then(response => {
        console.log(response);
        // 处理支付成功后的逻辑
        if (response.code === 200) {
          const div = document.createElement('div');
          div.innerHTML = response.data;
          document.body.appendChild(div);

          // 设置表单的 target 属性并提交表单
          document.forms['punchout_form'].setAttribute('target', '_blank');
          document.forms['punchout_form'].submit();

          // 处理确认支付的逻辑
          surePay(form).then(surePayResponse => {
            console.log(surePayResponse);
            if (surePayResponse.code === 200) {
              this.getList();
              this.$modal.msgSuccess("充值成功");
            }
          });

          this.dialogFormVisible = false;
        }
      })
    },
    cz(){
        this.dialogFormVisible = true
    },
    deleteDoctor(doctor) {
      console.log(doctor);
      followRemove(doctor).then(response => {
        this.getList();
        this.$modal.msgSuccess("取消关注成功");
      })
    },
    /** 查询钱包记录列表 */
    getListrecord() {

      listrecord().then(response => {
        console.log(response);
        this.personalList = response.data
        console.log(this.personalList);
      });
    },
    /** 查询钱包列表 */
    getList() {
      this.loading = true;
      moneyList().then(response => {
        this.mymoney = response.data
      });
    },

  }
};
</script>
<style>
.button-container {
  display: flex;
}

.custom-input {
  background: greenyellow !important; /* 使用 !important 来确保覆盖el-input默认样式 */
  padding-left: 30px;
  position: relative;
}

.custom-input-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/no_message.png');
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.table-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 数据表格宽度占满容器 */
  height: 100%; /* 数据表格高度占满容器 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.8); /* 设置一个半透明的背景，以便文字更清晰可读 */
}

.image-container {
  position: relative;
  width: 450px; /* 调整为图片的实际宽度 */
  height: 300px; /* 调整为图片的实际高度 */
  background-size: cover; /* 背景图覆盖整个容器 */
  background-position: center; /* 背景图居中 */
}

.table-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 数据表格宽度占满容器 */
  height: 100%; /* 数据表格高度占满容器 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.8); /* 设置一个半透明的背景，以便文字更清晰可读 */
}


.vertical-table {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid #ccc; /* 添加边框 */
  border-collapse: collapse; /* 合并边框 */
}

.table-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.table-cell {
  flex: 1;
  font-weight: bold;
  margin-right: 10px;
}

.table-cell:last-child {
  margin-right: 0;
}


.vertical-table {
  display: flex;
  flex-direction: column;
}

.data-block {
  margin-bottom: 20px;
}

.table-row {
  display: flex;
}

.table-cell {
  flex: 1;
}
</style>
